<template>
	<div>
		<vue3VideoPlay v-bind="options" />
	</div>
</template>

<script lang="ts" setup>
let props = defineProps({
	url: { // 播放地址
		type: String,
		default: '#'
	},
	width: {
		type: String,
		default: '100%'
	},
	height: {
		type: String,
		default: '100%'
	},
	control: {
		type: Boolean,
		default: true
	}
})

let options = reactive({
	width: props.width, //播放器宽度 也可以使用px
	height: props.height, //播放器高度  同理可以使用px
	color: "#409eff", //主题色
	title: "", //视频名称
	src: props.url, //视频源
	muted: false, //静音
	webFullScreen: false,
	speedRate: ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
	autoPlay: false, //自动播放
	loop: false, //循环播放
	mirror: false, //镜像画面
	ligthOff: false, //关灯模式
	volume: 0.3, //默认音量大小
	control: props.control, //是否显示控制
	controlBtns: [
		"audioTrack",
		"quality",
		"speedRate",
		"volume",
		"setting",
		"pip",
		"pageFullScreen",
		"fullScreen",
	], //显示所有按钮,
})

</script>
